<template>
  <div>
    <div>
      父组件:
      <el-input v-model="fatherText" style="width: 200px"></el-input>
    </div>

    <div>子组件传来:{{ sonText }}</div>
    <SonComponent
      @sonProvideMessage="sonProvideMessage"
      :fatherText="fatherText"
      data-attr="fatherText"
      another-attr="fatherText"
    >
      <template v-slot:header>
        <p style="color: blue">这是头部插槽内容</p>
      </template>

      <p style="color: red">----这是父组件插入子组件的插槽的内容---</p>
      <!-- <template v-slot="slotProps">
        <p>{{ slotProps.data }}</p>
        {{ slotProps }}
      </template> -->

      <template v-slot:footer>
        <p style="color: blue">这是底部插槽内容</p>
      </template>
    </SonComponent>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, provide, defineAsyncComponent } from "vue";
// import SonComponent from "./sonComponent.vue";
// 异步组件 懒加载 // 不带选项的异步组件
const SonComponent = defineAsyncComponent(() => import("./sonComponent.vue"));

// 带选项的异步组件
// const SonComponent = defineAsyncComponent({
//   loader: () => import("./sonComponent.vue"),
//   delay: 200,
//   timeout: 3000,
//   // errorComponent: ErrorComponent,
//   // loadingComponent: LoadingComponent
// });

export default defineComponent({
  name: "Father",
  components: {
    SonComponent,
  },
  setup() {
    const fatherText = ref("父传子这个是个静态的值");
    const inputValue = ref("");
    const sonText = ref("");
    const sonProvideMessage = (message: string) => {
      sonText.value = message;
    };
    provide("fatherText", fatherText);
    return {
      fatherText,
      sonProvideMessage,
      sonText,
      inputValue,
    };
  },
});
</script>
